<template>
  <nav>
    

  </nav>
  <!-- <router-view v-slot="{ Component }">
  <transition name="yang" enter-active-class="animate__animated animate__bounceIn" 
  leave-active-class="animate__animated animate__fadeOutUp">
    <component :is="Component" />
  </transition>
  </router-view> -->

  <router-view v-slot="{ Component }">
  <transition name="yang" >
    <component :is="Component" />
  </transition>
  </router-view>

</template>

<style lang="scss">
   $a-color:#000;
   body,h1,h2,h3,h4,h5,p,ul,form,dl,dd,dt{
      padding: 0;
      margin: 0;
   }
   ul,li{
      list-style: none;
   }
   img{
      display: block;
      border: none;
   }
   a{
      text-decoration: none;
      color:$a-color;
      &:visted{
          color: $a-color;
      }
   }
   body{
          min-width: 320px;
      }
   

   .yang-enter-active,.yang-leave-active{
      transition: all .8s ease-in-out;
   }
   .yang-enter-from,.yang-leave-to{
      opacity: 0;
      transform: translateX(200px) scale(.2) rotateX(180deg);
   } 
   
</style>
